import React, { Component } from 'react';
import styles from './index.css';
import { instance, counterState } from './model/model';
import Link from 'umi/link';
import { Button } from 'antd';
import { observer } from 'mobx-react';

export default function() {
  return <Page />;
}

const initialState = {
  model: instance,
};

type State = Readonly<typeof initialState>;

@observer
class Page extends Component<{}, State> {
  state = initialState;

  render() {
    const { model } = this.state;

    return (
      <div className={styles.normal}>
        <div className={styles.welcome} />
        <ul className={styles.list}>
          <li>
            To get started, edit <code>src/pages/index.js</code> and save to reload.
          </li>
          <li>
            <a href="https://umijs.org/guide/getting-started.html">Getting Started</a>
          </li>
        </ul>
        <div>全局变量的数量为: {model.n}</div>
        <div>{counterState.count}</div>
        <div>
          <Button>
            <Link to="/draw">去draw</Link>
          </Button>
          <Button>
            <Link to="/todo/">todolist</Link>
          </Button>
        </div>
      </div>
    );
  }

  onReset() {
    this.setState(() => {});
  }
}
